<template>
    <div>
        <a-modal width="1000px" :visible="visible" :title="null" @cancel="closeModal" class="large-modal left1child-modal"
            :getContainer="getParent" :footer="null" :dialog-style="{ top: '0' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div style="position:relative">
                    <div class="child-title">
                        <span class="child-title-words">机构信息</span>
                    </div>

                    <div class="data-select-parent" style="position:relative">
                        <div class="user-count">
                            <div class="child-content-title">
                                <img class="child-content-titleico" src="@/assets/large/panel-title-ico.png" />
                                医生数量
                            </div>

                            <div class="num-box">
                                <div class="num-list" v-for="(item,idx) in numList" :key="'num_'+idx">
                                    <img class="num-list-bg" src="@/assets/large/left2-numbg.png" v-if="item!==','" />
                                    <div class="num-list-word">{{item}}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="page-content">
                        <div class="content-left">
                            <div style="padding:0 10px">
                                <a-input-search class="large-search" allowClear v-model="keywords" placeholder="医生姓名"
                                    @search="searchDoctorList" />
                            </div>

                            <div style="margin-top:10px">
                                <div class="patient-list" :class="selDoctor.id===item.id&&'patient-list-s'"
                                    v-for="(item,i) in doctorList" :key="item.id" @click="clickDoctor(item)">
                                    <span>{{item.name}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="content-right">
                            <div class="log-top">
                                <div class="log-img-box">
                                    <img class="log-img" :src="selDoctor.headPortrait" />
                                </div>

                                <div>
                                    <div class="content-list">
                                        <span class="content-list-title">医生姓名：</span>
                                        <span class="content-list-info">{{selDoctor.name}}</span>
                                    </div>
                                    <div class="content-list">
                                        <span class="content-list-title">咨询量：</span>
                                        <span class="content-list-info">{{selDoctor.consultationCount|| '-'}}</span>
                                    </div>
                                    <div class="content-list">
                                        <span class="content-list-title">所属科室：</span>
                                        <span
                                            class="content-list-info">{{selDoctor.stairOfficesDirector}}-{{selDoctor.twoOfficesDirector}}</span>
                                    </div>
                                    <div class="content-list">
                                        <span class="content-list-title">职位：</span>
                                        <span class="content-list-info">{{selDoctor.job}}</span>
                                    </div>
                                </div>
                            </div>
                            <div style="margin-top:20px">
                                <div class="log-title">擅长疾病：</div>
                                <div class="log-text">
                                    <span v-for="item in selDoctor.adeptIllnessJson" :key="item.id">{{item.name}}，</span>
                                </div>
                            </div>
                            <div style="margin-top:20px">
                                <div class="log-title">简介</div>
                                <div class="log-text" v-html="selDoctor.synopsis">

                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </a-spin>
            <template slot="footer">
                <div></div>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import largeApi from "@/api/largeApi";
import { Component, Prop, Watch, Vue } from "vue-property-decorator";

@Component({
    name: "tpl",
    components: {},
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
        } else {
        }
    }
    loading = false;
    pageType = "中医馆";
    keywords = "";
    getParent() {
        return document.getElementById("largePage");
    }

    async mounted() {
        this.getPatientList();
    }
    closeModal() {
        this.$emit("closeModal");
    }
    numList: string[] = [];
    getNumList(num) {
        const str = Number(num).toLocaleString();
        return str.split("");
    }

    agencyName = "机构1";
    typeChage(type: string) {
        this.pageType = type;
    }
    doctorList: any[] = [];
    doctorAll: any[] = [];
    async getPatientList() {
        this.loading = true;
        try {
            const res = await largeApi.getOrganizationDoctorDetails({});
            const doctorList = res.data.doctorList;
            this.doctorList = doctorList.doctors;
            this.doctorAll = JSON.parse(JSON.stringify(doctorList.doctors));
            this.numList = this.getNumList(doctorList.statistics.totalCount);
            this.selDoctor = doctorList.doctors[0] || {};
        } finally {
            this.loading = false;
        }
    }
    selDoctor = {};
    clickDoctor(item) {
        this.selDoctor = item;
    }
    searchDoctorList() {
        if (this.keywords) {
            this.doctorList = this.doctorAll.filter((item) => {
                return item.name.indexOf(this.keywords) >= 0;
            });
        } else {
            this.doctorList = JSON.parse(JSON.stringify(this.doctorAll));
        }
         this.selDoctor = this.doctorList[0] || {};
    }
}
</script>
<style lang="scss">
.left1child-modal {
    .ant-modal-body {
        max-height: calc(100vh - 50px);
    }
    .child-type {
        padding: 15px 0;
    }
    .type-list {
        width: 120px;
        height: 40px;
        background-size: 100%;
        background-image: url("@/assets/large/type.png");
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        cursor: pointer;
        margin-right: 15px;
    }
    .type-active {
        background-image: url("@/assets/large/type-s.png");
    }

    .page-content {
        display: flex;
        border: solid 1px rgba(58, 211, 193, 0.5);
        border-radius: 4px;
        margin-top: 15px;
        display: flex;
    }
    .content-left {
        display: inline-block;
        width: 20%;
        max-width: 200px;
        border-right: solid 1px rgba(58, 211, 193, 0.5);
        padding: 10px 0;
        flex-shrink: 0;
    }

    .content-right {
        flex-grow: 1;
        padding: 15px;
    }
    .patient-list {
        font-size: 14px;
        padding: 10px;
        color: #fff;
        border-top: solid 1px rgba(58, 211, 193, 0.2);
        cursor: pointer;
    }
    .patient-list:hover {
        background-color: rgba(58, 211, 193, 0.2);
    }
    .patient-list-s {
        background-color: rgba(58, 211, 193, 0.4);
    }

    .content-box {
        padding: 10px 0;
        padding-left: 25px;
    }
    .content-list {
        padding: 2px;
        display: flex;
    }
    .content-list-title {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        vertical-align: top;
        display: inline-block;
        flex-shrink: 0;
    }
    .content-list-info {
        font-size: 14px;
        color: rgba(255, 255, 255, 1);
        display: inline-block;
        vertical-align: top;
    }

    .log-top {
        display: flex;
        align-items: center;
    }
    .log-img-box {
        height: 160px;
        width: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 10px;
    }
    .log-img {
        max-height: 160px;
        max-width: 120px;
        border-radius: 4px;
    }
    .log-title {
        font-size: 16px;
        color: #3ad3c1;
    }
    .log-text {
        color: rgba(255, 255, 255, 0.8);
        font-size: 14px;
    }

    .user-count {
        margin-top: 20px;
    }

    .num-box {
        font-weight: bold;
        font-size: 18px;
        color: #fff;
        margin-top: 10px;
        padding-left: 20px;
    }
    .num-list {
        display: inline-block;
        position: relative;
        height: 30px;
        min-width: 10px;
        margin-right: 1px;
    }
    .num-list-bg {
        height: 110%;
        display: block;
    }
    .num-list-word {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 2px;
    }
}
</style>
